<template>
  <div class="swipe-top">
    <div class="box">
      <van-icon name="vip-card" color="#5251da" />
      <p>特色课</p>
    </div>
    <div class="box">
      <van-icon name="chat" color="#7cb3a5" />
      <p>一对一辅导</p>
    </div>
    <div class="box" @click="$router.push('/calendar')">
      <van-icon name="clock-o" color="#ffd39f" />
      <p>学习日历</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.swipe-top {
  position: absolute;
  top: 150px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;

  .box {
    width: 150px;
    height: 150px;
    text-align: center;
    border-radius: 10px;
    background-color: white;
    padding-top: 30px;
    box-sizing: border-box;
    .van-icon {
      font-size: 40px;
      margin-bottom: 20px;
    }
    p {
      font-size: 14px;
      color: #8c8c9b;
    }
  }
}
</style>